import {
  ActionType,
  DrawerForm,
  ProColumns,
  ProForm,
  ProFormDatePicker,
  ProFormDigit,
  ProFormInstance,
  ProFormSelect,
  ProFormText,
  ProTable,
} from '@ant-design/pro-components';
import React, { useRef, useState } from 'react';
import { fetchChannelUser, getShopDayRate } from '../service';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<any>;
};

const UpdateDayRateForm: React.FC<UpdateFormProps> = (props) => {
  const formRef = useRef<ProFormInstance>();
 console.log(props.values)
  const defaultData = props?.values;
  return (
    <DrawerForm
      title="更新佣金"
      width="640px"
      formRef={formRef}
      visible={props.updateModalVisible}
      onVisibleChange={async (val) => {
        if (!val) {
          props.onCancel();
        } else {
          formRef?.current?.setFieldsValue({
            rate: defaultData.rate / 100,
            date: defaultData.date,
            proRate: defaultData.proRate / 100,
            subRate: defaultData.subRate  / 100,
            shopName: defaultData.shopName,
          });
        }
      }}
      onFinish={async (val:any) => {
        props.onSubmit({ ...val, appLink: defaultData.appLink });
      }}
    >
      <ProForm.Group>
        <ProFormDatePicker label="口令时间" disabled width="sm" name="date"></ProFormDatePicker>

        <ProFormText
          width="sm"
          name="shopName"
          label="店铺名称"
          tooltip="最长为 24 位"
          disabled={true}
          placeholder="请输入店铺名称"
          rules={[{ required: true, message: '店铺名称不能为空!' }]}
        />
      </ProForm.Group>
      
      <ProFormSelect
        label="选择渠道"
        name="channelId"
        width="md"
        request={async () => {
          const rsp = await fetchChannelUser({});
          return rsp.data;
        }}
      ></ProFormSelect>
      <ProForm.Group>
        <ProFormDigit
          width="xs"
          name="rate"
          label="后台比例"
          tooltip="最长为 24 位"
          placeholder="请输入后台比例"
          rules={[{ required: true, message: '后台比例不能为空!' }]}
        />
        <ProFormDigit
          width="xs"
          name="proRate"
          label="结算比例"
          tooltip="最长为 24 位"
          placeholder="请输入结算比例"
          fieldProps={{ precision: 2 }}
          rules={[{ required: true, message: '结算比例不能为空!' }]}
        />
        <ProFormDigit
          width="xs"
          name="subRate"
          label="渠道佣金比例"
          tooltip="最长为 24 位"
          placeholder="请输入佣金比例"
          fieldProps={{ precision: 2 }}
          rules={[{ required: true, message: '佣金比例不能为空!' }]}
        />
      </ProForm.Group>
    </DrawerForm>
  );
};

export default UpdateDayRateForm;
